<template>
  <el-button type="primary" @click="addUser">添加用户</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table :data="userPageInfo.list" style="width: 100%" @selection-change="selecId">
    <!-- 复选框 -->
    <el-table-column type="selection" width="55" />
    <!-- 序号 -->
    <el-table-column type="index" label="序号" />
    <el-table-column property="loginAct" label="账号" />
    <el-table-column property="name" label="姓名" />
    <el-table-column property="phone" label="手机号" />
    <el-table-column property="email" label="邮箱" />
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />

    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)" />
        <el-button type="success" :icon="Check" circle @click="view(scope.row.id)" />
        <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
      </template>
    </el-table-column>

  </el-table>
  <!-- 分页 -->
  <el-pagination background layout="prev, pager, next, jumper, ->, total" :total="userPageInfo.total"
    :page-size="userPageInfo.pageSize" @change="toPage" />

</template>

<script setup>
import { Edit, Check, Delete } from '@element-plus/icons-vue'
import { inject, onMounted, ref } from 'vue';
import { showMessage } from '../util/message';
import { doGet, doDelete } from '@/http/httpRequest'
import { useRouter } from 'vue-router';
import { confirmMessage } from '../util/message';

onMounted(() => {
  // 组件挂载完成后执行的操作  默认查询第一页数据
  loadUserList(1)
})

const userPageInfo = ref({})

//查询用户列表数据
const loadUserList = current => {
  doGet('api/users', { current: current }).then(resp => {
    if (resp.data.code == 200) {
      //将用户列表赋值给userPageInfo
      userPageInfo.value = resp.data.info
    } else {
      showMessage('用户查询失败', 'error')
    }
  })
}

//页码发生变化时执行的函数
const toPage = (current, pageSize) => {
  loadUserList(current)
}

//查看用户明细
const view = id => {
  //路由到明细页面
  window.location.href = '/dashboard/user/' + id
}

let router = useRouter()

//路由到添加用户页面
const addUser = () => {
  //路由到添加用户页面
  //window.location.href = '/dashboard/user/add'
  //利用vue-router路由到添加用户页面
  router.push('/dashboard/user/input')
}


//编辑用户
const edit = id => {
  //路由到编辑用户页面
  router.push('/dashboard/user/edit/' + id)
}

//从前端容器里面找到flush对象 
let flushPage = inject('flush')//@Resouce

//删除用户
const del = id => {

confirmMessage("确定删除用户吗？").then(()=>{
 //删除用户
  doDelete('api/user/' + id, {}).then(resp => {
    if (resp.data.code == 200) {
      //显示成功提示
      showMessage('删除用户成功', 'success')
      //刷新用户列表
      //window.location.reload()

      //改造成局部刷新
      flushPage()
    } else {
      //显示失败提示
      showMessage(resp.data.msg, 'error')
    }
  })
}).catch(()=>{
  //用户点击取消按钮
})
}


//定义数组 保存需要删除数据的id
let idArray = []

//获取要删除的数据的id
const selecId = (item) => {
  //清除数组
  idArray = []
  for(let index in item){
    idArray.push(item[index].id)
  }

  console.log(idArray);
  
}

//批量删除
const batchDel = () => {
  if(idArray.length <= 0){
    showMessage('请选择要删除的数据','warning')
  } else{
    confirmMessage('是否删除这些数据吗?').then(()=>{
      // [3,6,1,2]  3,6,1,2  
      // 3,6,1,2  3612
      let ids = idArray.join(',')
      // 发送删除请求
      doDelete('api/users', {ids:ids}).then(resp => {
        if (resp.data.code == 200) {
          //显示成功提示
          showMessage('删除用户成功', 'success')
          //刷新用户列表
          window.location.reload()
        } else {
          //显示失败提示
          showMessage(resp.data.msg, 'error')
        }
      })
    }).catch(()=>{
      //用户点击取消按钮
    })
  }
}
</script>

<style scoped></style>